<template>
    <div class="config-box">
        <p style="text-align: right" v-if="packageObj">当前版本:{{ packageObj.version }}</p>
        <el-divider content-position="left">
            <span class="title">设置</span>
        </el-divider>
        <div class="account-box">
            <!--            <div>-->
            <!--                <span class = "item-name">架构:</span><span>{{staffInfo.userName}}</span>-->
            <!--            </div>-->
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="账号信息" name="first">
                    <div>
                        <h1 class="item-name">用户名</h1>
                        <span>{{ staffInfo.userNum }}</span>
                    </div>
                    <el-divider />
                    <div>
                        <h1 class="item-name">架构</h1>
                        <span>{{ staffInfo.userName }}</span>
                    </div>
                    <el-divider />
                    <!--            <div>-->
                    <!--                <span class = "item-name">工班:</span><span>{{staffInfo.userName}}</span>-->
                    <!--            </div>-->
                    <div>
                        <h1 class="item-name">操作</h1>
                        <el-button size="small" type="danger" plain @click="logOutBtnClick()">
                            退出登录&nbsp;
                            <i class="fa fa-power-off" aria-hidden="true"></i>
                        </el-button>
                        <el-button size="small" type="danger" plain @click="changePasswordDialogVisible = true">
                            修改密码
                        </el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <el-dialog v-model="changePasswordDialogVisible" :title="'修改密码'">
                <div class="change-password-box">
                    <el-form
                        ref="changePasswordRef"
                        :rules="changePasswordRules"
                        :model="changePasswordStaffInfo"
                        label-width="100px"
                    >
                        <el-form-item label="原始密码" prop="userPassword">
                            <el-input v-model="changePasswordStaffInfo.userPassword"/>
                        </el-form-item>
                        <el-form-item label="新密码" prop="userPassword1">
                            <el-input v-model="changePasswordStaffInfo.userPassword1"/>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="userPassword2">
                            <el-input v-model="changePasswordStaffInfo.userPassword2"/>
                        </el-form-item>
                    </el-form>
                    <div>
                        <el-button @click="changePasswordDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="changePasswordCall(changePasswordRef)">确定</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import {computed, watch, reactive, toRaw, ref} from "vue";
import store from "../store";
import {removeToken} from "../api/loginFunctions";
import router from "../router";
import {changePassword} from "../api";
import {ElMessage} from "element-plus";
const activeName = ref('first');
const electron = require('electron');

// const Store = require('electron-store');
// const eleStore = new Store();
const ipc = electron.ipcRenderer;

let staffInfo = computed(() => {
    // console.log(store.state.staffInfo);
    return store.state.staffInfo;
});

function getConfigObj() {
    // if(eleStore.has("configObj")){
    //     return eleStore.get("configObj");
    // }else
    {
        return {
            timeout: [
                {time: 30, color: "#ff0000", enable: true},
                {time: 60, color: "#ff8000", enable: true},
                {time: 90, color: "#ffff00", enable: true},
                {time: 120, color: "#0000ff", enable: true},
                {time: 180, color: "#00ff00", enable: true},
            ],
            inform: {}
        }
    }
}

let configObj = reactive(
    getConfigObj()
);

// watch(configObj,(newValue)=>{
//     eleStore.set("configObj",newValue)
// },{deep:true});

function addTimeout() {
    configObj.timeout.push(
        {time: 30, color: "rgba(0,0,0,0.33)", enable: true},
    )
}

function deleteTimeout(item) {
    let index = configObj.timeout.indexOf(item);
    configObj.timeout.splice(index, 1);
}

function clearConfig() {
    // eleStore.clear();
}


// let config = computed({
//     get(){
//         return store.state.config.configObj;
//     }
// });
// watch(config,(newValue)=>{
//     store.commit('config/SaveConfig',newValue);
// },{deep:true});

function exportPathBtnClick(item) {
    ipc.send('OpenTheFileSelectionBox', '打开选择文件窗口');
    ipc.on('OpenTheFileSelectionBoxCall', (e, data) => {
        item.value = data;
    });
}

function logOutBtnClick() {
    ElMessageBox.confirm('确定要退出吗?')
        .then(() => {
            router.replace("/");
            removeToken();
        })
        .catch(() => {
            // catch error
        })
}

let msgWinObj = reactive({
    msg: {
        title: "应用内Ding_C语言",
        content: "C语言是一门面向过程的、抽象化的通用程序设计语言，广泛应用于底层开发。C语言能以简易的方式编译、处理低级存储器。C语言是仅产生少量的机器语言以及不需要任何运行环境支持便能运行的高效率程序设计语言。尽管C语言提供了许多低级处理的功能，但仍然保持着跨平台的特性，以一个标准规格写出的C语言程序可在包括类似嵌入式处理器以及超级计算机等作业平台的许多计算机平台上进行编译。",
    },
    size: {
        width: 370,
        height: 500,
    },
    timeout: 2.5,
});

function showMsg() {
    ipc.send('showMsgWindow', toRaw(msgWinObj));
}


//修改密码
let changePasswordDialogVisible = ref(false);
const changePasswordRef = ref()
let changePasswordStaffInfo = reactive({
    userPassword: '',
    userPassword1: '',
    userPassword2: ''
});
const changePasswordRules = reactive({
    userId: [{required: true, message: '不能为空!', trigger: 'blur',},],
    userPassword: [{required: true, message: '不能为空!', trigger: 'blur'},],
    userPassword1: [{required: true, message: '不能为空!', trigger: 'blur'},],
    userPassword2: [{required: true, message: '不能为空!', trigger: 'blur'},],
});

// {
//     "username": "l2_gp1",
//     "password": "123456",
//     "newPassword": "666666"
// }


const changePasswordCall = async (formEl) => {
    if (!formEl) return;
    try {
        await formEl.validate((valid, fields) => {
            if (valid) {
                if (changePasswordStaffInfo.userPassword1 === changePasswordStaffInfo.userPassword2) {
                    let data = {
                        username: staffInfo.value.userNum,
                        password: changePasswordStaffInfo.userPassword,
                        newPassword: changePasswordStaffInfo.userPassword1,
                    }
                    console.log(data);
                    changePassword(data).then((res) => {
                        if (res.code === 200) {
                            ElMessage({
                                showClose: true,
                                message: '修改成功!!',
                                type: 'success',
                            });
                            changePasswordDialogVisible.value = false;
                        } else {
                            ElMessage({
                                showClose: true,
                                message: '修改失败!可能是原始密码错误!',
                                type: 'warning',
                            })
                        }
                    }, (error) => {
                        console.log(error);
                    });
                } else {
                    ElMessage({
                        showClose: true,
                        message: '两次密码不一致!',
                        type: 'warning',
                    })
                }
            }
        });
    } catch (err) {
        console.log(err);
    }
}

/**
 * 获取package.json的信息
 */
let packageObj = ref(null);
function getPackage() {
    ipc.send('getPackage');
    ipc.on('getPackageCall', (e, data) => {
        packageObj.value = data;
    });
}
getPackage();



</script>

<style scoped lang="scss">

.config-box {
    padding: 10px;
    background: #fff;
    height: 100%;
    overflow: auto;

    & > div {
        padding: 0 20px;
    }

    .timeout-box {
        .row-box {
            & > div {
                margin-left: 20px;
            }
        }

        .el-input {
            width: 120px;
        }
    }

    .row-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .col1 {
        //display: inline-block;
        //width:150px;
        margin: 5px 0;
    }

    .col2 {
        display: inline-block;
        min-width: 100px;
    }

    .title {
        font-weight: bold;
        color: #18191C;
    }
    .demo-tabs{
        h1{
            font-weight: bolder;
            color: #000000;
            margin-bottom: 10px;
        }
    }
}

</style>
